<template>
  <div class="all">
    <my-back></my-back>
    <div class="value" v-if="value">
      <div class="title">
        {{value.title}}
      </div>
      <div class="mainValue" ref="abc">
        <ConceptStyle :concept="value.data.concept" :code="value.data.code"/>
      </div>
      <div>
        <MyAnalysis :analysis="value.data.analysis"/>
      </div>
    </div>
  </div>
</template>

<script>
import MyBack from '@/components/MyBack.vue'
import ConceptStyle from '@/components/ConceptStyle.vue'
import MyAnalysis from '@/components/MyAnalysis.vue'
import { ref, onMounted } from 'vue'

export default {
  components: {
    MyBack,
    ConceptStyle,
    MyAnalysis
  },
  data () {
    return {
      value: "",
      index: 0
    }
  },
  methods: {},
  setup(){  
    let abc = ref("abc")
    onMounted(()=>{
      console.log(abc.value)
    })
    console.log(abc.value);
    return { abc }
  },
  mounted () {
    let title = this.$route.query.title
    this.value = this.$store.state.route[title]
  }
}
</script>
<style scoped>
.value{
  margin-top: 20px;
}
.title{
  font-weight: 800;
  font-size: 3vh;
  line-height: 4.4vh;
}
.all{
  font-size: 2.7vh;
  line-height: 3.6vh;
}

.mainValue{
  padding:5px 15px;
  background-color: white;
}
</style>
